<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>药品出库</title>
    <link href="/layui/css/layui.css" rel="stylesheet">
</head>
<body>
<div class="layui-padding-2" style="margin-top: 5px;">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <form class="layui-form layui-form-pane">

                <div class="layui-form-item layui-col-space20">
                    <div class="layui-col-md6">
                        <label class="layui-form-label">药品数量</label>
                        <div class="layui-input-block">
                            <input type="number" name="count" lay-affix="number" autocomplete="off" class="layui-input" lay-verify="required|myVerify">
                        </div>
                    </div>
                    <div class="layui-col-md6">
                        <label class="layui-form-label">药品单价</label>
                        <div class="layui-input-block">
                            <input type="number" name="price" lay-affix="number" autocomplete="off" class="layui-input" lay-verify="required">
                        </div>
                    </div>
                </div>

                <div class="layui-form-item layui-col-space20">
                    <div class="layui-col-md12 layui-form-text">
                        <label class="layui-form-label">备注信息</label>
                        <div class="layui-input-block">
                            <textarea name="other" class="layui-textarea" lay-verify="required" maxlength="255"></textarea>
                        </div>
                    </div>
                </div>

                <input hidden="hidden" type="number" name="id" id="id" th:value="${id}">

                <!-- 原有库存数量，这里是用来进行合法性验证的，不能写name属性，否则会覆盖前面的count-->
                <input hidden="hidden" type="number" id="count" th:value="${count}">

                <div class="layui-form-item layui-col-space20">
                    <div class="layui-col-md12" style="text-align: center;">
                        <button class="layui-btn layui-bg-purple" lay-submit lay-filter="toDo">确认出库</button>
                        <button type="reset" class="layui-btn layui-btn-primary">清空内容</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>

<script src="/layui/layui.js"></script>
<script>
    layui.use(['form', 'layer', 'jquery'], function () {
        let form = layui.form;
        let layer = layui.layer;
        let $ = layui.jquery;

        let myInput = $('#count').val();    // 获取用户输入的药品数量

        // 自定义验证规则
        form.verify({   // 验证出库数量是否小于等于原有库存数量
            myVerify: function (value) {
                if (value > parseFloat(myInput)) {
                    return '不能超过原有库存数量';
                }
                if (value > Math.floor(value)) {
                    return '药品数量应为整数';
                }
                if (value < 1) {
                    return '请输入 1 - ' + myInput + '的正整数';
                }
            }
        });

        // 提交事件
        form.on('submit(toDo)', function (data) {
            let field = data.field; // 获取表单字段值

            $.ajax({
                url: '/doOutputStock',
                type: 'POST',
                contentType: 'application/json',
                data: JSON.stringify(field),
                success: function (res) {
                    if (res.code) {
                        layer.msg('出库成功！', {icon: 1});
                        setTimeout(function () {
                            parent.layer.close(parent.layer.getFrameIndex(window.name));    // 关闭弹出层
                        }, 2000);
                    } else {
                        layer.msg('出库失败！', {icon: 2});
                    }
                },
                error: function () {
                    layer.msg('Ajax请求异常！', {icon: 0});
                }
            });
            return false; // 阻止默认 form 跳转
        });
    });
</script>
</body>
</html>